<template>
  <div>
    <h2>计算属性</h2>
    <input type="text" v-model.lazy="xing">
    <span>+</span>
    <input type="text" v-model.lazy="ming">
    <span>=</span>
    <input type="text" v-model.lazy="fullName">
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '张',
      ming: '三'
    }
  },
  computed: {
    fullName: {
      // return this.xing + '' + this.ming
      // 当使用计算属性的时候，get就执行了
      get () {
        return this.xing + '' + this.ming
      },
      // 当修改计算属性的时候，set就执行了，形参就是修改后的结果
      set (val) {
        let arr =val.split(' ')
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  }
}
</script>

<style>

</style>